<template>
	<view class="container">
    <image src="@/static/背景.png" mode="widthFix"></image>
    <image class="fix" src="@/static/规则.png" @click="$refs.rule.open()" mode="widthFix"></image>
    <uni-popup ref="rule" type="center">
      <rule-modal @on-close="$refs.rule.close()"></rule-modal>
    </uni-popup>
    <!-- <image style="top: 190rpx;" class="fix" src="@/static/查看.png" mode="widthFix"></image> -->
    <view class="container-receive">
      <image v-if="isGet === '0'" @click="handleSubmit" src="@/static/按钮-马上拆礼物.png" mode="widthFix"></image>
      <image v-else @click="handleCheck" src="@/static/按钮-查看礼物.png" mode="widthFix"></image>
    </view>
    <uni-popup type="center" ref="coming">
      <view class="popup-coming">
        <image class="coming-header" src="@/static/关闭.png" @click="$refs.coming.close()" mode="widthFix"></image>
        <view class="coming-main">
          <image src="@/static/券.png" mode="widthFix"></image>
          <image @click="handleCheck" style="width: 90%;margin: 20rpx auto 0;" src="@/static/马上查看.png" mode="widthFix"></image>
        </view>
      </view>
    </uni-popup>
    
    <uni-popup type="center" ref="uncoming">
      <view class="popup-main">
        <image src="@/static/关闭.png" @click="$refs.uncoming.close()" mode="widthFix"></image>
        <view class="main-body">
          <span>可先领取千层蛋糕5折劵</span>
          <image style="width: 80%; margin: auto;" src="@/static/千层蛋糕.png" mode="widthFix"></image>
          <image @click="handleReceive" style="margin-top: 20rpx;" src="@/static/立即领取.png" mode="widthFix"></image>
        </view>
      </view>
    </uni-popup>
    <view class="container-main">
      <image src="@/static/标题框.png" mode="widthFix"></image>
      <view class="main-welfare">
        <view class="welfare-item" @click="handleWelfare('赚福利币')">
          <image src="@/static/赚福利币.png" mode="widthFix"></image>
          <image class="welfare-icon" src="@/static/福利1.png" mode="widthFix"></image>
        </view>
        <view class="welfare-item" @click="handleWelfare('生日靓号')">
          <image src="@/static/生日靓号.png" mode="widthFix"></image>
          <image class="welfare-icon" src="@/static/福利2.png" mode="widthFix"></image>
        </view>
        <view class="welfare-item">
          <view class="item-main">
            <view class="main-list" v-for="item in list" :key="item.taskCode">
              <image :src="item.taskImg" mode="widthFix"></image>
              <view class="list-title">
                <h3>{{item.taskName}}</h3>
                <span>{{item.taskTitle}}</span>
              </view>
              <button @click="handleWelfare('老用户',item.jumpUrl)">去参与</button>
            </view>
          </view>
          <image class="welfare-icon" src="@/static/福利3.png" mode="widthFix"></image>
        </view>
        <view class="welfare-list">
          <view class="list-item" @click="handleWelfare('幸福西饼')">
            <image class="welfare-icon" src="@/static/福利4.png" mode="widthFix"></image>
            <image src="@/static/幸福西饼.png" mode="widthFix"></image>
            <h2 class="dot">【幸福西饼】5折券</h2>
            <span class="item-info">&nbsp;</span>
            <view class="item-price">
              <article>￥79.5</article>
              <strong>￥ <span>0</span></strong>
            </view>
          </view>
          <view class="list-item" @click="handleWelfare('周黑鸭')">
            <image class="welfare-icon" src="@/static/福利5.png" mode="widthFix"></image>
            <image src="@/static/周黑鸭.png" mode="widthFix"></image>
            <h2 class="dot">【周黑鸭】满95减50元券</h2>
            <span class="item-info">【锁鲜装全国可用】</span>
            <view class="item-price">
              <article>￥79.5</article>
              <strong>￥ <span>0</span></strong>
            </view>
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
  const uniPopup = ()=>import('@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue')
  const RuleModal = ()=>import('@/components/rules.vue')
  import {throttle} from '@/utils/Tools.js'
	export default {
    components:{RuleModal,uniPopup},
		data() {
			return {
        isGet:'0',
        list:[]
			}
		},
		onLoad() {
      this._getData()
      this._getList()
      this.handleSubmit = throttle(this.handleSubmit,2000)
      setTimeout(_=>{
        this.$point({
          action_code:"970000000",//对照表填 必须传
          action_type:"enter",//对照表填 必须传
          params: [{
            k: "active_id",  //必须传
            v: "srgh",
          },
          {
            k: "user_phone", //必须传
            v: this.$mobile,
          },
          {
            k: "user_ip",  // 必须传
            v: this.$ip,
          }],
        })
      },2000)
		},
		methods: {
      async handleSubmit(){  ///  马上拆礼物
        uni.showLoading({
          title:'加载中...'
        })
        const res = await this.$get(`/birth/getCoupon?userPhone=${this.$mobile}`,'',1,this.$headers)
        if(res.code == '200'){
          this.$refs.coming.open()
          setTimeout(()=>{
            this._getData()
          },1000)
        }else if(res.code == '0027'){
          this.$refs.uncoming.open()
        }else{
          this.$toast(res.msg,'error')
        }
        
        this.$point({
          action_code:"970000002",//对照表填 必须传
          action_type:"click",//对照表填 必须传
          params: [{
            k: "active_id",  //必须传
            v: "srgh",
          },
          {
            k: "user_phone", //必须传
            v: this.$mobile,
          },
          {
            k: "user_ip",  // 必须传
            v: this.$ip,
          }]
        })
      },
      handleCheck(){  ///  点击去查看
        ms.navigateTo({
          target: 'https://u.10010.cn/qAuDJ'
        })
        this.$point({
          action_code:"970000003",//对照表填 必须传
          action_type:"click",//对照表填 必须传
          params: [{
            k: "active_id",  //必须传
            v: "srgh",
          },
          {
            k: "user_phone", //必须传
            v: this.$mobile,
          },
          {
            k: "user_ip",  // 必须传
            v: this.$ip,
          }]
        })
      },
      handleWelfare(e,src){  //   点击了福利
        switch(e){
          case '老用户':
            ms.navigateTo({
              target: src
            });
          break;
          case '赚福利币':
            ms.navigateTo({
              target: 'https://u.10010.cn/qAue4'
            })
          break;
          case '生日靓号':
            ms.navigateTo({
              target: 'https://u.10010.cn/qAuFh'
            })
          break;
          case '幸福西饼':
            ms.navigateTo({
              target: 'https://u.10010.cn/qAuFI'
            })
          break;
          case '周黑鸭':
            ms.navigateTo({
              target: 'https://u.10010.cn/qAuFj'
            })
          break;
        }
        this.$point({
          action_code:"970000004",//对照表填 必须传
          action_type:"click",//对照表填 必须传
          params: [{
            k: "active_id",  //必须传
            v: "srgh",
          },
          {
            k: "user_phone", //必须传
            v: this.$mobile,
          },
          {
            k: "user_ip",  // 必须传
            v: this.$ip,
          },
          {
            k: "goods_name",  // 必须传
            v: e,
          }]
        })
      },
      handleReceive(){  ///  立即领取券
        ms.navigateTo({
          target: 'https://u.10010.cn/qAuFI'
        })
        this.$point({
          action_code:"970000001",//对照表填 必须传
          action_type:"click",//对照表填 必须传
          params: [{
            k: "active_id",  //必须传
            v: "srgh",
          },
          {
            k: "user_phone", //必须传
            v: this.$mobile,
          },
          {
            k: "user_ip",  // 必须传
            v: this.$ip,
          }]
        })
      },
      /////         network
      async _getData(){  //  请求展示
        uni.showLoading({
          title:'加载中...'
        })
        const res = await this.$get(`/birth/qualification?userPhone=${this.$mobile}`,'',1,this.$headers)
        this.isGet = res.data.isGet
      },
      async _getList(){  //  获取任务列表
        const res = await this.$get(`/birth/taskList?userPhone=${this.$mobile}`,'',1,this.$headers)
        this.list = res.data.tasks
      }
		}
	}
</script>

<style lang="less" scoped>
page{
  background: #3668e8;
}
.container{
  position: relative;
  padding-bottom: 50rpx;
  .fix{
    width: 42rpx;
    position: absolute;
    right: 0;
    top: 72rpx;
  }
  &-receive{
    margin-top: -80rpx;
    padding: 0 115rpx;
  }  ///   container-receive
  
  &-main{
    display: flex;
    flex-direction: column;
    padding: 0 30rpx;
    margin-top: 50rpx;
    .main-welfare{
      border: 1px solid #84C3F9;
      border-top: 0;
      padding: 30rpx 20rpx;
      border-bottom-left-radius: 20rpx;
      border-bottom-right-radius: 20rpx;
      .welfare-item{
        position: relative;
        border-radius: 10rpx;
        overflow: hidden;
        margin-bottom: 30rpx;
        .item-main{
          background: #fff;
          .main-list{
            display: flex;
            padding: 20rpx 30rpx;
            align-items: center;
            justify-content: flex-start;
            border-bottom: .5px solid #eee;
            uni-image{
              width: 90rpx;
            }
            .list-title{
              color: #ccc;
              font-size: 24rpx;
              margin: 0 auto 0 30rpx;
              flex: 1;
              h3{
                font-size: 28rpx;
                color: #333;
                margin-bottom: 8rpx;
              }
            }
            button{
              line-height: 55rpx;
              font-size: 28rpx;
              color: #fff;
              background: #d6341e;
              border: 1px solid transparent;
              border-radius: 50rpx;
              padding: 0 20rpx;
              margin-left: 10rpx;
              &.success{
                background: #fff;
                color: #d6341e;
                border-color: #d6341e;
              }
            }
          }
        }
      }
      .welfare-list{
        display: flex;
        justify-content: space-between;
        .list-item{
          position: relative;
          width: 48%;
          background: #fff;
          text-align: center;
          font-size: 24rpx;
          box-sizing: border-box;
          border-radius: 10rpx;
          overflow: hidden;
          h2{
            font-size: 24rpx;
            margin: 10rpx 0 6rpx;
          }
          .item-info{
            display: block;
            color: #999;
            height: 30rpx;
          }
          .item-price{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10rpx;
            padding: 0 10rpx 10rpx;
            article{
              color: #999;
              text-decoration: line-through;
            }
            strong{
              color: #f00;
              span{
                font-size: 48rpx;
              }
            }
          }
        }
      }
      .welfare-icon{
        position: absolute;
        left: 0;
        top: 0;
        width: 98rpx;
        z-index: 1;
      }
    }
  }   ///   container-main end
  
  .popup-main{
    text-align: right;
    uni-image{
      width: 60rpx;
    }
    .main-body{
      width: 510rpx;
      height: 545rpx;
      margin: 20rpx 50rpx 0;
      text-align: center;
      box-sizing: border-box;
      background: url('@/static/uncoming.png') no-repeat;
      background-size: contain;
      padding: 110rpx 50rpx 30rpx;
      display: flex;
      flex-direction: column;
      &.main-coming{
        background: url('@/static/coming.png') no-repeat;
        background-size: contain;
      }
      uni-image{
        width: 100%;
      }
      span{
        font-size: 30rpx;
        color: #555;
      }
    }
  }
  
  .popup-coming{
    text-align: right;
    position: relative;
    .coming-header{
      position: absolute;
      width: 60rpx;
      right: -60rpx;
      top: 60rpx;
    }
    .coming-main{
      width: 496rpx;
      height: 726rpx;
      text-align: center;
      background: url('@/static/coming.png') no-repeat;
      background-size: cover;
      padding: 280rpx 24rpx 0;
      box-sizing: border-box;
      uni-image{
        width: 100%;
      }
    }
  }
}
</style>
